<template>
  <div class="product-item">
    <image class="product-item-img" :src="data.image" mode="" />
    <view class="flex-column">
      <view class="font-bold">
        {{ data.title }}
      </view>
      <view class="flex-between">
        <view class="price">
          <text>￥</text>
          <text class="size-32">{{ data.price }}</text>
          <text>/ {{ data.unit }}</text>
        </view>
        <view>
          <view v-if="data.count" class="btn-primary"> 加购 </view>
          <view class="number-box" v-else>
            <view class="number-box-minus" @click="handleMinus"> </view>
            <input type="number" :value="data.count" @bulr="handleChange" />
            <view class="number-box-plus" @click="handlePlus"> </view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const emit = defineEmits(['change'])
const handleChange = (e) => {
  console.log(e.detail.value)
}
const handlePlus = () => {
  console.log('plus')
  emit('change', 1)
}
const handleMinus = () => {
  console.log('minus')
}
</script>

<style lang="scss" scoped>
.product-item {
  display: flex;
  margin-bottom: 48rpx;
  .product-item-img {
    width: 144rpx;
    height: 144rpx;
    border-radius: 16rpx;
  }
  .font-bold {
    font-size: 28rpx;
    font-weight: bold;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .flex-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .flex-between {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .price {
    color: #e8424a;
    font-size: 28rpx;
    font-weight: bold;
    .size-32 {
      font-size: 32rpx;
    }
  }
  .btn-primary {
    border-radius: 8rpx;
    background-color: #04b27c;
    color: #fff;
    font-size: 24rpx;
    padding: 8rpx 32rpx;
  }
  .number-box {
    display: flex;
    align-items: center;
    background-color: #F4F5F7;
    border-radius: 24rpx;
    .number-box-minus {
      width: 48rpx;
      height: 48rpx;
      background: url("/static/images/minus.svg") no-repeat center center;
      background-size: 100% 100%
    }
    .number-box-plus {
      width: 48rpx;
      height: 48rpx;
      background: url("/static/images/plus.svg") no-repeat center center;
      background-size: 100% 100%
    }
    input {
      width: 60rpx;
      font-size: 28rpx;
      text-align: center;
      padding: 0 10rpx;
    }
  }
}
</style>
